<template>
  <div>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item to="/film" name="/film">
        <span class="iconfont icon-dianying" slot="icon"></span>
        <span>电影</span>
      </van-tabbar-item>
      <van-tabbar-item to="/cinema" name="/cinema">
        <span class="iconfont icon-yingyuan" slot="icon"></span>
        <span>影院</span>
      </van-tabbar-item>
      <van-tabbar-item to="/info" name="/info">
        <span class="iconfont icon-zixun" slot="icon"></span>
        <span>咨询</span></van-tabbar-item
      >
      <van-tabbar-item to="/ucenter" name="/ucenter">
        <span class="iconfont icon-wode" slot="icon"></span>
        <span>我的</span></van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import "../../assets/font/iconfont.css";
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  // data() {
  //   return {
  //     // active：0，
  //     active:
  //       window.location.pathname === "/film/comingSoon"
  //         ? "/film"
  //         : window.location.pathname,
  //   };
  // },
  data() {
    return {
      //底部菜单选中第几个
      active: this.pathHanlder()
    }
  },
  methods: {
  // 
    pathHanlder() {
      let path = window.location.pathname
      // 如果接收到子路由，替换路径为父级路由
      if(path === '/film/NowPlaying' || path === '/film/ComingSoon'){
        path = '/flim'
      }
      return path
    }
  },
  // mounted(){
  //     // 刷新没有通过vue-router跳转过来的路由，无法通过$route获取路由参数 path路径信息
  //     // js原生语法获取path路径
  //     let path = window.location.pathname
  //     switch(path){
  //       case'/film/nowPlaying':this.active = 0
  //        break;
  //       case'/cinema':this.active = 1
  //        break;
  //       case'/info':this.active = 2
  //        break;
  //       case'/ucenter':this.active = 3
  //       break;
  //     }
  // }
};
</script>

<style lang="scss" scoped>
.van-tabbar-item__icon {
  span:nth-child(1) {
    font-size: 20px;
  }
}
</style>
